<template>
  <div class="home">
      <div class="head flex-boxs flex-align-y-c pa">
          <h1>{{ greetings }}好! {{ username }}</h1>
          <button class="bm-btn-3 normal" @click="exit">退出</button>
      </div>
      <div class="body">
        <ul class="overview flex-boxs bg">
            <router-link to="/day-details" tag="li" class="day">
                <div>{{ daytotal }}</div>
                <p>当日支出</p>
            </router-link>
            <router-link to="/month-details" tag="li" class="month">
                <div>{{ monthtotal }}</div>
                <p>当月支出</p>
            </router-link>
        </ul>

        <ul class="integrated flex-boxs bg">
            <router-link to="/my-money" tag="li" class="day">
                <i class="fa fa-jpy"></i>
                <p>我的资金</p>
            </router-link>
            <router-link to="/income-list" tag="li" class="day">
                <i class="fa fa-credit-card-alt"></i>
                <p>收入统计</p>
            </router-link>
            <router-link to="/type-list" tag="li" class="day">
                <i class="fa fa-bar-chart"></i>
                <p>类别统计</p>
            </router-link>
        </ul>

        <div class="recently bg">
            <h2 class="bo-b"><i></i>最近帐单</h2>
            <ul>
                <template v-if="recentlyList && recentlyList.length">
                    <li v-for="item in recentlyList" :class="{'income': item.incspe > 0}" class="flex-boxs flex-align-y-c bo-b">
                        <div class="left">
                            <h5>{{ item.typename }} </h5>
                            <p v-if="item.remark">{{ item.remark }}</p>
                            <p>{{ item.incspedate }}</p>
                        </div>
                        <div class="right">{{ item.incspe > 0 ? '+' : '-' }} {{ item.money }}</div>
                    </li>
                </template>
                <li v-else class="error">{{ recentlyMeg }}</li>
            </ul>
        </div>
      </div>
      <tem-footer></tem-footer>
  </div>
</template>

<script>
import { apiIncspeList, apiRecently, apiExit } from '@http'
import footer from '@components/footer'
export default {
    data () {
        return {
            username: sessionStorage.getItem('username'),
            daytotal: '...',
            monthtotal: '...',
            recentlyList: null,
            recentlyMeg: null
        }
    },
    components: {
        'tem-footer': footer
    },
    created () {
        this.day()
        this.month()
        this.recently()
    },
    methods: {
        // 当天记录
        day () {
            apiIncspeList ({scope: 'day', incspe: -1})
                .then((response) => {
                    if (response.data) {
                        let total = response.data.data.total_spe
                        let i = total / 50
                        let daytotal = 0.01
                        let timer = setInterval(() => {
                                if (daytotal < total) {
                                    daytotal += i
                                    this.daytotal = parseFloat(daytotal.toFixed(2))
                                }
                                else {
                                    this.daytotal = total
                                    clearInterval(timer)
                                }
                        }, 10)
                    }
                    else {
                        this.daytotal = '?'
                    }
                })
                .catch((error) => {
                    this.daytotal = '?'
                })
        },
        // 当月记录
        month () {
            apiIncspeList ({scope: 'month', incspe: -1})
                .then((response) => {
                    if (response.data) {
                        let total = response.data.data.total_spe
                        let i = total / 50
                        let monthtotal = 0.01
                        let timer = setInterval(() => {
                                if (monthtotal < total) {
                                    monthtotal += i
                                    this.monthtotal = parseFloat(monthtotal.toFixed(2))
                                }
                                else {
                                    this.monthtotal = total
                                    clearInterval(timer)
                                }
                        }, 10)
                    }
                    else {
                        this.monthtotal = '?'
                    }
                })
                .catch((error) => {
                    this.monthtotal = '?'
                })
        },
        // 最近记帐
        recently () {
            this.recentlyMeg = '正在加载最近帐单...'
            apiRecently ({count: 5})
                .then((response) => {
                    this.recentlyMeg = response.data.message
                    if (response.data.status === 1) {
                        this.recentlyList = response.data.data
                    }
                })
                .catch((error) => {

                })
        },
        // 退出登入
        exit () {
            apiExit ()
                .then((response) => {
                    if (response.data.status) {
                        sessionStorage.removeItem('username')
                        this.$router.push({ path: '/index'})
                    }
                    else {
                        
                    }
                })
                .catch((error) => {

                })
        }
    },
    computed: {
        // 问候语
        greetings () {
            let hour = new Date().getHours()
            if (hour >= 0 && hour <= 5) {
                return '凌晨'
            }
            else if (hour >= 6 && hour <= 8) {
                return '早上'
            }
            else if (hour >= 9 && hour <= 11) {
                return '上午'
            }
            else if (hour == 12) {
                return '中午'
            }
            else if (hour >= 13 && hour <= 16) {
                return '下午'
            }
            else if (hour >= 17 && hour <= 18) {
                return '傍晚'
            }
            else if (hour >= 19 && hour <= 23) {
                return '晚上'
            }
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.home{padding-bottom:@50px;
    .head{height:@60px; background:@color;
        h1{font-size:@16px; color:#fff;}
        button{flex:0 0 @60px; height:@25px; line-height:@25px; color:#fff; border-color:#fff;}
    }
    .overview{padding:@20px;
        li{
            div{width:@80px; height:@80px; margin:auto; line-height:@80px; text-align:center; font-size:@16px; font-weight:bold; border:1px solid #000; border-radius:50%;}
            p{margin-top:@15px; font-size:@14px; text-align:center;}
        }
        .day{
            div{color:@colorA-01; border-color:@colorA-01;}
        }
        .week{
            div{color:@colorB-01; border-color:@colorB-01;}
        }
        .month{
            div{color:@colorC-01; border-color:@colorC-01;}
        }
    }
    .integrated{margin-top:@10px; padding:@20px 0;
        li{text-align:center;
            i{font-size:@20px; color:@grey-01;}
            p{margin-top:@10px;}
        }
    }
    .recently{margin-top:@10px;
        h2{padding-left:@10px; line-height:@40px; font-size:@12px; color:@color; border-left:2px solid @color;}
        li{padding:@10px @15px;
            h5{font-size:@14px;
                span{font-size:@12px; color:@grey-02;}
            }
            p{margin-top:@4px; color:@grey-02;}
            .right{font-size:@14px; font-weight:bold; text-align:right;}
        }
        .income{color:@colorB;}
        .error{text-align:center; line-height:@200px;}
    }
}
</style>
